<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    
    div {
        width: 200px;
        height: 150px;
        margin: 20px;
        background-color: green;
    }

    .cls {
        background-color: yellow;
    }
    
    </style>
    <title>Get Elements by Class</title>
</head>
<body>
    <p class="cls">First P</p>
    <p>Second P</p>
    <span class="cls">First Span</span><br>
    <span>Second Span</span><br>

    <div class="cls">First Div</div>
    <div>Second Div</div>
    <br>
    <input type="button" value="Click" id="btn">

    <script>
        document.getElementById("btn").onclick = function(){
            var objs = document.getElementsByClassName("cls");

            for (i=0; i<objs.length; i++){
                objs[i].style.backgroundColor = "red";
            }
        }
    
    </script>
</body>
</html>